<template v-loading="loading">
<div>
  <el-table :data="tableDataChild" :show-header="false">
    <el-table-column prop="date" label="" width="48" align="center"></el-table-column>
    <el-table-column label="名称" prop="sAppName" align="center" min-width="120"></el-table-column>
    <el-table-column label="当前版本" prop="sVersion" align="center" min-width="80"></el-table-column>
    <el-table-column label="上线时间" align="center" min-width="100">
        <template scope="scope">
            <span>{{!scope.row.sOnlineTime?'--':scope.row.sOnlineTime.substring(0,10)}}</span>
        </template>
    </el-table-column>
    <el-table-column label="最小版本" prop="sMinVersion" align="center" min-width="80"></el-table-column>
    <el-table-column label="地址" align="center" min-width="280">
        <template scope="scope">                    
            <span>{{scope.row.sUrl || '--'}}</span>
        </template>
    </el-table-column>
    <el-table-column align="left" label="操作" min-width="120">
        <template scope="scope">
            <el-button type="text" class="btn-success" @click="checkDes(scope.row.sDesc)">查看描述</el-button>            
            <el-button type="text" class="btn-success" @click="deleteVersion(scope.row.pId)">删除</el-button>
        </template>
    </el-table-column>
    </el-table>
    <el-dialog title="查看描述信息" :visible.sync="dialogFormVisible" size="tiny">
        <div class='describe'>
            <span v-html="describe"></span>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible=false">确定</el-button>
        </div>
    </el-dialog>
</div>
</template>
<script>
import { getOldVersionInfoBySource, deleteAppVersion} from 'api/versionMagement';
export default {
    data() {
        return {
            describe: '',
            dialogFormVisible: false,
            loading: false,
            tableDataChild: [] // 内table
        };
    },
    props: {
        scope: Object // $index/row/store  你可以看scope 这个对象，这个页面有很多简化的
    },
    created() {
        this.btnChild(this.scope)
    },
    methods: {
        btnChild(val) {
            if (val.row.sSource) {
                this.loading = true;
                getOldVersionInfoBySource(val.row.sSource).then(data => {
                    this.loading = false;
                    if (data.data.content) {
                        this.tableDataChild = data.data.content;
                    }
                }).catch(Error => {
                    this.loading = false;
                    this.$message.error(Error)
                })
            } else {
                this.tableDataChild = [];
            }
        },
        checkDes(des) {
            this.dialogFormVisible = true;
            this.describe = des.replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;');
        },

        // 删除
        deleteVersion(id) {
            this.$confirm('确定要删除该版本吗?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                deleteAppVersion(id).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除版本成功'
                    });
                    this.$emit('deleteApp', res)
                }) 
            }).catch(() => {
                this.$message.info('已取消');
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.el-table{
    border:none !important;
}
.describe{
    line-height:24px;
    margin: 40px 50px 50px;
}
</style>